import React from 'react';
import { hashHistory } from 'react-router';
import { flowApi } from 'js/api/flow';
import { timeData } from 'js/core/timeData';
import echarts from 'js/lib/echarts';
import SelectTimeType from 'views/component/selectTimeType/selectTimeType';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import './totalFlow.scss';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';

class Shop extends React.Component {
  constructor() {
    super()
  }
  componentDidMount() {
    this.setChart()
  }
  componentWillReceiveProps() {
    this.setChart();
    setTimeout(() => {
      this.chart.resize();
    }, 50)
  }
  setChart = () => {
    let data = this.props.data;
    this.chart = echarts.init(this.refs.chart);
    let option = { textStyle: { fontSize:window.chatFontSize },
      grid: {
        left: '7%', top: '15%', width: '86%', height: '75%',
      },
      xAxis: {
        type: 'category',
        data: data.dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#999', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#999', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: data.dataX.length - 7,
        endValue: data.dataX.length - 1
      },
      series: {
        type: 'line',
        smooth: true,
        label: { normal: { show: true }, color: '#666' },
        lineStyle: { normal: { color: '#BFB1F7' } },
        data: data.dataY
      }
    };
    this.chart.setOption(option);
  }
  render() {
    let { data, loading } = this.props;

    return <div className="store">
      <div className="storeHeader flex-vcenter">
        <div className="title  flex-g-1"><span className="rank">NO.{data.Top}</span>{data.ShopName}&nbsp;&nbsp;{i18n.get("客流概况")}</div>
        <SubViewLink className="open flex-col-4 text-right" moduleName={'flow'} modelData={{ id: data.ShopId, type: 5 }} title={data.ShopName + ' ' + i18n.get("客流概况")}>{i18n.get("查看详情")}&gt;</SubViewLink>
      </div>
      <div className={this.props.openStatus ? "" : "hide"}>
        <div className="chart" ref="chart">
          {loading && <div className="loading"></div>}
        </div>
        <div className="bottomText">
          <div className="flex">
            <div className="flex-g-1 item flex-vcenter"><div className="point"></div>{i18n.get("昨日人次")}&nbsp;&nbsp;{data.Yestoday} </div>
            <div className="flex-g-1 item flex-vcenter"><div className="point"></div>{i18n.get("今日人次")}&nbsp;&nbsp;{data.Today}</div>
          </div>
          <div className="flex">
            <div className="flex-g-1 item flex-vcenter"><div className="point"></div>{i18n.get("本周人次")}&nbsp;&nbsp;{data.Week} </div>
            <div className="flex-g-1 item flex-vcenter"><div className="point"></div>{i18n.get("本月人次")}&nbsp;&nbsp;{data.Month}</div>
          </div>
        </div>
      </div>
    </div>
  }
}


class FlowAllThree extends React.Component {
  constructor() {
    super()
    this.state = {
      data: [],
      openStatus: false,
      loading: true
    }
  }
  componentDidMount() {
    this.getData();
  }
  getData = () => {
    this.setState({ loading: true })
    flowApi.FlowAllThree(data => {
      this.setState({ loading: false })
      this.setState({ data: data.data })
    })
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus })
  }
  render() {
    let { openStatus, loading } = this.state;
    return <div className="flowAllThree">
      <div className="box">
        <div className="boxHead flex-vcenter">
          <div className="title flex-g-1">{i18n.get("前三名后三名店铺客流概况")}</div>
          <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}
            <div className={openStatus ? "close_icon" : "open_icon"}></div></div>
        </div>
        {this.state.data.map(item => {
          return <Shop data={item} openStatus={openStatus} loading={loading} />
        })}
      </div>
    </div>
  }
}



class FlowAllStore extends React.Component {
  constructor() {
    super()
    this.state = {
      timeType: 'day',
      openStatus: false,
      loading: false,
      total: 0,
    }
  }
  componentDidMount() {
    let time = timeData.getTimeRange('day');
    this.query = {
      timeType: 'day',
      start: time.start,
      end: time.end
    }
    this.getData();
  }
  getData = () => {
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.storeChart) {
      this.storeChart.dispose();
    }
    this.setState({ loading: true })
    api('/Flow/FlowAllStore', this.query).then((data) => {
      let total = 0;
      if (data.data.store) {
        data.data.store.forEach(item => {
          total += Number(item.value);
        })
      }
      this.setState({ loading: false, total: total })
      let cdata = data.data.all;

      let option = { textStyle: { fontSize:window.chatFontSize },
        grid: {
          left: '7%',
          top: '10%',
          width: '86%',
          height: '80%',
        },
        xAxis: {
          type: 'category',
          data: cdata.dataX,
          boundaryGap: false,
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: true, color: '#999', interval: 0 },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false, lineStyle: { color: '#ccc' } },
          splitLine: { show: true, lineStyle: { color: '#ccc' } },
          axisLabel: { show: false, color: '#999' },
          axisLine: { show: true, lineStyle: { color: '#ccc' } },
        },
        dataZoom: {
          type: 'inside',
          zoomLock: true,
          startValue: cdata.dataX.length - 7,
          endValue: cdata.dataX.length - 1
        },
        series: {
          type: 'line',
          smooth: true,
          label: { normal: { show: true }, color: '#666' },
          lineStyle: { normal: { color: '#BFB1F7' } },
          data: cdata.dataY
        }
      }
      this.chart = echarts.init(this.refs.chart);
      this.chart.setOption(option);
      let option1 = { textStyle: { fontSize:window.chatFontSize },
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          formatter: "{b}:<br/>{c}({d}%)"
        },
        series: [
          {

            color: ['#aaf4bd', '#81c5ff', '#fed871', '#ffa9a9'],
            type: 'pie',
            radius: ['30%', '50%'],
            data: data.data.store
          }
        ]
      }
      this.storeChart = echarts.init(this.refs.storeChart);
      this.storeChart.setOption(option1);
    });
  }
  timeTypeOnChange = (value, time) => {
    this.query.timeType = value;
    this.query.start = time.start;
    this.query.end = time.end;
    this.setState({ timeType: value })
    this.getData();
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.storeChart.resize()
    })
  }
  render() {
    let { timeType, openStatus, loading, total } = this.state;
    return <div className="flowAllStore">
      <div className="box">
        <div className="boxHead flex-vcenter">
          <div className="title">{i18n.get("全国客流走势分析")}</div>
          <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
          <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
        </div>
        <SelectTimeType value={timeType} onChange={this.timeTypeOnChange} className="mb25" />
        <div className="chart" ref="chart">
          {loading && <div className="loading"></div>}
        </div>
        <div className={openStatus ? "storePer" : "storePer hide"}>
          <div className="boxHead  flex-vcenter">
            <div className="title">{i18n.get("店铺客流量占比")}</div>
          </div>
          <div className="chart storechart" ref="storeChart">
            {loading && <div className="loading"></div>}
          </div>
          {!loading && <div className="pieMid">
            <div>{this.state.total}</div>
            <div>{i18n.get("总客流")}</div>
          </div>}
        </div>
      </div>
    </div>
  }
}

class TotalFlow extends React.Component {
  render() {
    return <div id="totalFlow">
      <FlowAllStore />
      <FlowAllThree />
    </div>
  }
}

export default TotalFlow;


